<template>
    <div class="box">
        <!-- 表头筛选按钮 -->
        <div class="threeBtn">
            <el-row justify="space-between">
                <!-- 三个小按钮 -->
                <el-col :span="3" :offset="0">
                    <el-tooltip content="导出" placement="top" effect="light">
                        <el-button type="success" :icon="Upload" circle @click="handleExportExcel" />
                    </el-tooltip>
                    <el-tooltip content="筛选列" placement="top" effect="light">
                        <el-button type="danger" :icon="Operation" circle />
                    </el-tooltip>
                    <el-tooltip content="打印" placement="top" effect="light">
                        <el-button type="warning" :icon="Printer" circle />
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>
        <!-- 表格部分 -->
        <!-- 表格文本居中对齐 -->
        <el-table :data="tableData" style="width: 100%" border
            :header-cell-style="{ background: '#f2f2f2', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
           >
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="name" label="学员姓名" width="100" />
            <el-table-column prop="cardId" label="身份证号" width="200" />
            <el-table-column prop="tel" label="手机号码" width="140" />
            <el-table-column prop="carType" label="准驾车型" width="120" />
            <el-table-column prop="subject" label="当前科目" width="120" />
            <el-table-column prop="subjectState" label="当前进度" width="120" />
            <el-table-column prop="progressTime" label="进度时间" width="120" />
            <el-table-column prop="count" label="考试次数" width="120" />
            <el-table-column prop="passTime" label="合格时间" width="120" />
            <el-table-column prop="coach" label="分配教练" width="120" />
            <el-table-column prop="schoolName" label="校区" width="120">
                <!-- 接收表格行数据 -->
                <template #default="scope">
                    {{ schoolnameMap[scope.row.schoolName] }}
                </template>
            </el-table-column>
            <el-table-column prop="referrer" label="推荐人" width="120" />
            <el-table-column prop="comment" label="备注" width="120" />
        </el-table>
        <!-- 分页部分 -->
        <!-- 分页器汉化 -->
        <el-config-provider :locale="locale">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-config-provider>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue'
import { stuExamInfoGet } from '../../../api/student'
import { Upload, Printer, Operation} from '@element-plus/icons-vue'
//分页器汉化
import { ElConfigProvider } from 'element-plus';
import locale from "element-plus/es/locale/lang/zh-cn";
import { exportExcel } from "../../../utils/exportExcel"
import { examType, objType } from "../../../types/examType"
import { getSchoolName } from "../../../utils/schoolName"
import { useRoute } from 'vue-router';
let route=useRoute()
let {cardId}=route.query

let schoolnameMap = reactive<objType>({
    objectid: ''
})
schoolnameMap = await getSchoolName()
//表单数据
const tableData = ref<Array<examType>>([])
//获取学员数据
stuExamInfoGet(1, 5,{cardId}).then(async (res) => {
    tableData.value = res.data.results
    total.value = res.data.count
})
// 分页功能
//当前页码
const currentPage = ref(1)
// 每页显示条数
const pageSize = ref(5)
const total = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    stuExamInfoGet(currentPage.value, val).then(res => {
        tableData.value = res.data.results
        total.value = res.data.count
    })
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    stuExamInfoGet(val, pageSize.value).then(res => {
        tableData.value = res.data.results
        total.value = res.data.count
    })
}
//表格导出功能
const handleExportExcel = () => {
    console.log("表格导出");
    //表头中文名
    const titleArr = ['id', '巡河次数', '完成次数', '巡河人员', '时间']
    exportExcel(tableData.value, 'test', titleArr, 'sheetName');
}
</script>
<style lang="scss" scoped>
.box{
    font-weight: normal;
}
.el-pagination {
    margin-top: 20px;
}

.threeBtn {
    border: 1px solid #ddd;
    background: #f2f2f2;
    margin-top: 20px;
    padding: 16px;
}
</style>